import React, { useState, useEffect } from "react";
import CommonModal from "@/components/CommonModal";
import { Form, Input, Alert, message } from "antd";
import { layout1 } from "@/utils/config";
import { updateEcStoreTagOp } from "../service";
import CommonLoading from "@/components/CommonLoading";
import Typography from "@/pages/OrderModule/common/components/Typography";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";

export default ({ visible, item, handleCancel, handleOk }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	const { id, ecStoreTag } = item;

	useEffect(() => {
		//编辑项发生变化时，需要手动更新表单的值
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		if (loading) {
			return false;
		}
		form.validateFields().then(val => {
			handleUpdate(val);
		});
	};

	const handleUpdate = async val => {
		setLoading(true);
		const res = await updateEcStoreTagOp({
			ecStoreId: id,
			...val
		});
		if (res.success) {
			message.success("修改成功！");
			handleOk();
		}
		let timer = setTimeout(() => {
			setLoading(false);
			clearTimeout(timer);
			timer = null;
		}, 300);
	};

	return (
		<CommonModal minHeight="100px" title="编辑网店标签" visible={visible} onCancel={handleCancel} width="494px" onOk={onOk}>
			<Alert
				style={{ marginBottom: "16px" }}
				showIcon
				message={<Typography as="s1">注意：主要适用于便携打印模板中网点标签的取值内容 </Typography>}
			/>
			<Form name="set-shop-pick-label" form={form} initialValues={{ ecStoreTag }} autoComplete="off">
				<Form.Item style={{ width: "444px" }} name="ecStoreTag" rules={[{ required: true, message: "网店标签不能为空" }]}>
					<CommonInput placeholder="网店标签" maxLength={6} showCount aria-required />
				</Form.Item>
			</Form>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};
